<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                 <el-col>
                     <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                 </el-col>
             </el-row>
             <!-- 表格 -->
             <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
             <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color: lightgreen;"></i>
                    <i class="el-icon-error" v-else  style="color: red;"></i>
                    </template>
                    <!-- 排序 -->
                    <template slot="order" slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                        <el-tag type="success" size="mini"  v-else-if="scope.row.cat_level===1">二级</el-tag>
                        <el-tag type="warning" size="mini" v-else>三级</el-tag>
                    </template>
                    <!-- 操作 -->
                    <template slot="opt" slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.cat_id)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.cat_id)">删除</el-button>
                    </template>
             </tree-table>

             <!-- 分页区域 -->
             <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-card>
        <!-- 添加分类的对话框 -->
        <el-dialog
          title="添加分类"
          :visible.sync="addCateDialogVisible"
          width="50%"
          @close="addCateDialogClosed">
          <!-- 添加分类的表单 -->
          <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
            <el-form-item label="分类名称：" prop="cat_name">
              <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类：">
            <!-- options 用来指定数据源 -->
            <!-- props 用来指定配置对象 -->
                <el-cascader
                expand-trigger="hover"
                :options="parentCateList"
                :props="cascaderProps"
                v-model="selectedKeys"
                @change="parentCateChanged"
                clearable
                change-on-select >
                </el-cascader>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑角色对话框 -->
<el-dialog
  title="编辑商品"
  :visible.sync="editDialogVisible"
  width="50%"
  @close="editDialogClose">
  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
  <el-form-item label="商品名称"  prop="cat_name">
    <el-input v-model="editForm.cat_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                // 查询条件
                querInfo:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                //商品分类的数据列表，默认为空
                catelist:[],
                // 总数据条数
                total:0,
                // 为table指定列的定义
                columns:[{
                    label:'分类名称',
                    prop:'cat_name'
                },{
                    label:'是否有效',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'isok'
                },{
                    label:'排序',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'order'
                },{
                    label:'操作',
                    // 表示，将当前列定义为模板列
                    type:'template',
                    // 表示当前这一列使用模板名称
                    template:'opt'
                }
                ],
                // 控制添加对话框的显示与隐藏
                addCateDialogVisible:false,
                // 添加分类的表单数据对象
                addCateForm:{
                    // 蒋要添加分类的名称
                    cat_name:'',
                    // 父级分类的Id
                    cat_pid:0,
                    // 分类的等级，默认要添加的是1级分类
                    cat_level:0
                },
                // 添加分类表单的验证规则对象
                addCateFormRules:{
                    cat_name: [
                        { required : true,message:'请输入分类名称',trigger:'blur'},
                    ]
                },
                // 父级分类的列表
                parentCateList:[],
                // 指定级联选择器的配置对象
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                // 选中的父级分类的Id数组
                selectedKeys:[],
                // 控制编辑角色对话框的显示与隐藏
                editDialogVisible:false,
                // 查询到的角色信息对象
            editForm:{},
            // 修改表单的验证规则对象
            editFormRules:{
                cat_name: [
                        { required : true,message:'请输入分类名称',trigger:'blur'},
                    ]
            }
            }
        },
        created(){
            this.getCateList()
        },
        methods:{
            // 获取商品分类数据
            async getCateList(){
                const {data:res}= await this.$http.get('categories',{params:this.querInfo})
                // console.log(res);
                if(res.meta.status!==200){
                    return this.$message.error('获取商品列表失败！')
                }
                // console.log(res.data);
                // 把数据列表，赋值给 catelist
                this.catelist=res.data.data
                // 为总数据条数赋值
                this.total=res.data.total
            },
            // 监听 pagesize 改变
            handleSizeChange(newSize){
                this.querInfo.pagesize=newSize
                this.getCateList()
            },
            // 监听 pagenum 改变
            handleCurrentChange(newPage){
                this.querInfo.pagenum=newPage
                this.getCateList()
            },
            // 点击按钮，展示添加分类的对话框
            showAddCateDialog(){
                // 先获取父级分类发数据列表
                this.getParentCateList()
                // 再展示出对话框
                this.addCateDialogVisible=true
            },
            // 获取父级分类的数据列表
            async getParentCateList(){
                const {data:res}= await this.$http.get('categories',{params:{type:2}})
                if(res.meta.status!==200){
                    return this.$message.error('获取父级分类数据失败！')
                }
                // console.log(res.data);
                this.parentCateList=res.data
            },
            // 选择项发生变化触发这个函数
            parentCateChanged(){
                // console.log(this.selectedKeys);
                // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
                // 反之，就说明没有选中任何父级分类
                if(this.selectedKeys.length>0){
                    // 父级分类的Id
                    this.addCateForm.cat_pid= this.selectedKeys[this.selectedKeys.length-1]
                    // 为当前分类的等级赋值
                    this.addCateForm.cat_level=this.selectedKeys.length
                    return
                }else{
                    // 父级分类的Id
                    this.addCateForm.cat_pid= 0
                    // 为当前分类的等级赋值
                    this.addCateForm.cat_level=0
                }
            },
            // 点击按钮，添加新的分类
            addCate(){
                this.$refs.addCateFormRef.validate(async valid=>{
                    if(!valid) return
                    const {data:res}= await this.$http.post('categories',this.addCateForm)
                    if(res.meta.status!==200) {
                        return res.$message.error('添加分类失败！')
                    }
                    this.$message.success('添加分类成功！')
                    this.getCateList()
                    this.addCateDialogVisible=false
                })
            },
            // 监听对话框的关闭事件，重置表单数据
            addCateDialogClosed(){
                this.$refs.addCateFormRef.resetFields()
                this.selectedKeys=[]
                this.addCateForm.cat_level=0
                this.addCateForm.cat_pid=0
            },
            //  展示编辑商品的对话框
        async showEditDialog(id){
            const {data:res}= await this.$http.get('categories/'+id)
             if(res.meta.status!==200){
                 return this.$message.error('查询商品信息失败！')
             }
             this.editForm=res.data
             this.editDialogVisible=true
         },
         //  监听修改用户对话框的关闭
         editDialogClose(){
             this.$refs.editFormRef.resetFields()
         },
        //  修改角色信息并提交
         editUserInfo(){
             this.$refs.editFormRef.validate(async valid=>{
                if(!valid) return
                // 发起修改角色信息的数据请求
                const {data:res}= await this.$http.put('categories/'+this.editForm.cat_id,{
                    cat_name:this.editForm.cat_name
                })
                if(res.meta.status!==200){
                    return this.$message.error('更新商品信息失败！')
                }
                // 关闭对话框
                this.editDialogVisible=false
                // 刷新数据列表
                this.getCateList()
                // 提示修改成功
                this.$message.success('更新商品信息成功！')
             })
         },
         //  根据Id删除对应的用户信息
        async removeUserById(id){
            //  弹框询问用户是否删除数据
            const confirmResult=await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        // 如果角色确认删除，则返回值为字符串 confirm
        // 如果角色取消删除，则返回值为字符串 cancel
        // console.log(confirmResult);
        if(confirmResult!=='confirm'){
            return this.$message.info('已取消删除')
        }
        const {data:res}= await this.$http.delete('categories/'+id)
        if(res.meta.status!==200){
            return this.$message.error('删除商品失败！')
        }
        this.$message.success('删除商品成功！')
        this.getCateList()
         }
        }
    }
</script>

<style scope>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>